<script setup lang="ts">
import { ref, watch } from "vue";
import { useColumns } from "./columns";
import "plus-pro-components/es/components/search/style/css";
import {
  PlusSearch,
  PlusDialogForm,
  type PlusColumn,
  type FieldValues
} from "plus-pro-components";
import { ElMessage } from "element-plus";
import { router } from "@/router";
import { setUser } from "@/api/user";
import { getFeedbackDetail, updateFeedback } from "@/api/common";
defineOptions({
  name: "OperateFeedback"
});

const searchColumns: PlusColumn[] = [
  {
    label: "搜索",
    width: 200,
    prop: "keyWord",
    valueType: "copy",
    tooltip: "请输入搜索关键词"
  },
  {
    label: "问题类型",
    prop: "quesType",
    labelWidth: 120,
    valueType: "select",
    options: [
      {
        label: "新功能建议",
        value: "新功能建议",
        color: "red"
      },
      {
        label: "功能异常",
        value: "功能异常",
        color: "red"
      },
      {
        label: "体验问题",
        value: "体验问题",
        color: "red"
      },
      {
        label: "投诉反馈",
        value: "投诉反馈",
        color: "red"
      },
      {
        label: "其他问题",
        value: "其他问题",
        color: "red"
      }
    ]
  },
  {
    label: "问题状态",
    prop: "status",
    labelWidth: 120,
    valueType: "select",
    options: [
      {
        label: "未处理",
        value: 0,
        color: "red"
      },
      {
        label: "已关闭",
        value: 1,
        color: "red"
      },
      {
        label: "回复中",
        value: 2,
        color: "red"
      }
    ]
  }
];

const defaultSearchState = ref({});

const {
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  onSizeChange,
  loadData,
  onKeywordChange,
  onCurrentChange
} = useColumns();
function detailClick(row) {
  console.log(
    "%crow===详情>>>: ",
    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
    row
  );
  router.push({ name: "UserDetail", query: { id: row.id } });
}

const rules = {};
const formColumns: PlusColumn[] = [
  {
    label: "反馈ID",
    prop: "id"
  },
  {
    label: "反馈用户",
    prop: "account"
  },
  {
    label: "反馈标题",
    prop: "title"
  },
  {
    label: "反馈类型",
    prop: "quesType"
  },
  {
    label: "反馈图片",
    prop: "imgs"
  },
  {
    label: "问题状态",
    prop: "status",
    labelWidth: 120,
    valueType: "select",
    options: [
      {
        label: "未处理",
        value: 0,
        color: "red"
      },
      {
        label: "已关闭",
        value: 1,
        color: "red"
      },
      {
        label: "回复中",
        value: 2,
        color: "red"
      }
    ]
  },
  {
    label: "反馈回复",
    prop: "reply",
    valueType: "textarea",
    rules: [{ required: true, message: "请输入反馈回复", trigger: "blur" }]
  }
];
const visible = ref(false);
const values = ref<FieldValues>({});
const confirmLoading = ref(false);
async function editClick(row) {
  console.log(
    "%crow===编辑>>>: ",
    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
    row
  );

  try {
    const res = await getFeedbackDetail({ qId: row.id });
    values.value = res.data;
    visible.value = true;
  } catch (error) {
    console.log(error, "error");
  }
}

const handleSubmit = async (value: FieldValues) => {
  const updatedValues = { ...values.value };
  console.log("updatedValues", updatedValues);

  confirmLoading.value = true;
  const params = {
    qId: updatedValues.id,
    reply: updatedValues.reply
  };
  try {
    const res = await updateFeedback(params);
    visible.value = false;
    confirmLoading.value = false;
    formRef.value?.formInstance?.resetFields();
    ElMessage.success("处理成功");
    loadData();
  } catch (error) {
    confirmLoading.value = false;
    console.log(error, "error");
  }
};

const handleSearch = (value: any) => {
  console.log(value, "search");
  onKeywordChange(value);
};
const handleReset = value => {
  console.log("reset");
  onKeywordChange(value);
};

const handleChange = (value: any, target: any) => {
  console.log("change", value);
  if (target.prop == "keyWord") {
    return;
  }
  onKeywordChange(value);
};

const formRef = ref();
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>用户反馈</h3>
        </template>
        <PlusSearch
          :default-values="defaultSearchState"
          class="mt-5"
          :columns="searchColumns"
          :hasUnfold="false"
          @reset="handleReset"
          @search="handleSearch"
          @change="handleChange"
        />
      </ElPageHeader>
    </template>
    <pure-table
       ref="tableRef"
showOverflowTooltip
      border
      adaptive
      :adaptiveConfig="adaptiveConfig"
      row-key="id"
      alignWhole="center"
       
      :loading="loading"
      :loading-config="loadingConfig"
      :data="dataList"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="onSizeChange"
      @page-current-change="onCurrentChange"
    >
      <template #status="{ row }">
        <el-tag v-if="row.status == 1" type="success">已处理</el-tag>
        <el-tag v-else-if="row.status == 2" type="primary">回复中</el-tag>
        <el-tag v-else type="danger">未处理</el-tag>
      </template>
      <template #operation="{ row }">
        <el-button type="primary" size="small" @click="editClick(row)"
          >详情</el-button
        >
      </template>
    </pure-table>
    <PlusDialogForm
      ref="formRef"
      v-model:visible="visible"
      v-model="values"
      :form="{ columns: formColumns, rules, labelWidth: 120 }"
      :dialog="{ confirmLoading }"
      title="处理用户反馈"
      @confirm="handleSubmit"
    >
      <template #plus-field-id>
        <span>{{ values.id }}</span>
      </template>
      <template #plus-field-account>
        <span>{{ values.account }}</span>
      </template>
      <template #plus-field-quesType>
        <span>{{ values.quesType }}</span>
      </template>
      <template #plus-field-title>
        <span>{{ values.title }}</span>
      </template>
      <template #plus-field-status>
        <el-tag v-if="values.status == 1" type="success">已处理</el-tag>
        <el-tag v-else-if="values.status == 2" type="primary">回复中</el-tag>
        <el-tag v-else type="danger">未处理</el-tag>
      </template>
      <template #plus-field-imgs>
        <div class="flex flex-row flex-wrap gap-2">
          <el-image
            v-for="(item, index) in values.imgs.split(',')"
            :key="index"
            preview-teleported
            loading="lazy"
            :src="item"
            :preview-src-list="values.imgs.split(',')"
            fit="cover"
            class="w-[50px] h-[50px]"
          />
        </div>
      </template>
    </PlusDialogForm>
  </ElCard>
</template>

<style scoped></style>
